<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门管理</title>
</head>
<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon">
<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="../assets/css/bootstrap.min.css"/>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"/>
<!-- page specific plugin styles -->
<!-- text fonts -->
<link rel="stylesheet" href="../assets/css/google-fonts.css"/>
<!-- ace styles -->
<link rel="stylesheet" href="../assets/css/ace.min.css"/>
<!--&lt;!&ndash;[if lte IE 9]>-->
<!--<link rel="stylesheet" href="../assets/css/ace-part2.min.css"/>-->
<!--<![endif]&ndash;&gt;-->
<link rel="stylesheet" href="../assets/css/ace-skins.min.css"/>
<link rel="stylesheet" href="../assets/css/ace-rtl.min.css"/>
<link rel="stylesheet" href="../assets/css/jquery.gritter.css" />
<link rel="stylesheet" href="../assets/css/jquery-ui.min.css" />
<link rel="stylesheet" href="../assets/css/chosen.css" />
<!--&lt;!&ndash;[if lte IE 9]>-->
<!--<link rel="stylesheet" href="../assets/css/ace-ie.css"/>-->
<!--<![endif]&ndash;&gt;-->
<!-- inline styles related to this page -->
<!-- ace settings handler -->
<script src="../assets/js/ace-extra.min.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lte IE 8]>
<script src="../js/html5shiv.min.js"></script>
<script src="../js/respond.min.js"></script>
<![endif]-->

<script src="../jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="../assets/js/jquery-ui.min.js"></script>
<script src="../assets/js/jquery.gritter.min.js"></script>
<script src="../assets/js/chosen.jquery.min.js"></script>
<script src="http://cdn.bootcss.com/mustache.js/2.2.1/mustache.js"></script>
<script src="../bootstrap-3.3.7/js/bootstrap.min.js"></script>
<body class="no-skin" youdao="bind" style="background: white">
<input id="gritter-light" checked="" type="checkbox" class="ace ace-switch ace-switch-5"/>

<div class="page-header">
    <h1>
        用户管理
        <small>
            <i class="ace-icon fa fa-angle-double-right"></i>
            维护部门与用户关系
        </small>
    </h1>
</div>
<div class="main-content-inner">
    <div class="col-sm-3">
        <div class="table-header">
            部门列表&nbsp;&nbsp;
            <a class="green" href="#">
                <i class="ace-icon fa fa-plus-circle orange bigger-130 dept-add"></i>
            </a>
        </div>
        <div id="deptList">
        </div>
    </div>
    <div class="col-sm-9">
        <div class="col-xs-12">
            <div class="table-header">
                用户列表&nbsp;&nbsp;
                <a class="green" href="#">
                    <i class="ace-icon fa fa-plus-circle orange bigger-130 user-add"></i>
                </a>
            </div>
            <div>
                <div id="dynamic-table_wrapper" class="dataTables_wrapper form-inline no-footer">
                    <div class="row">
                        <div class="col-xs-6">
                            <div class="dataTables_length" id="dynamic-table_length"><label>
                                展示
                                <select id="pageSize" name="dynamic-table_length" aria-controls="dynamic-table" class="form-control input-sm">
                                    <option value="10">10</option>
                                    <option value="25">25</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                </select> 条记录 </label>
                            </div>
                        </div>
                    </div>
                    <table id="dynamic-table" class="table table-striped table-bordered table-hover dataTable no-footer" role="grid"
                           aria-describedby="dynamic-table_info" style="font-size:14px">
                        <thead>
                        <tr role="row">
                            <th tabindex="0" aria-controls="dynamic-table" rowspan="1" colspan="1">
                                姓名
                            </th>
                            <th tabindex="0" aria-controls="dynamic-table" rowspan="1" colspan="1">
                                所属部门
                            </th>
                            <th tabindex="0" aria-controls="dynamic-table" rowspan="1" colspan="1">
                                邮箱
                            </th>
                            <th tabindex="0" aria-controls="dynamic-table" rowspan="1" colspan="1">
                                电话
                            </th>
                            <th tabindex="0" aria-controls="dynamic-table" rowspan="1" colspan="1">
                                状态
                            </th>
                            <th class="sorting_disabled" rowspan="1" colspan="1" aria-label=""></th>
                        </tr>
                        </thead>
                        <tbody id="userList"></tbody>
                    </table>
                    <div class="row" id="userPage">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="dialog-dept-form" style="display: none;">
    <form id="deptForm">
        <table class="table table-striped table-bordered table-hover dataTable no-footer" role="grid">
            <tr>
                <td style="width: 80px;"><label for="parentId">上级部门</label></td>
                <td>
                    <select id="parentId" name="parentId" data-placeholder="选择部门" style="width: 200px;"></select>
                    <input type="hidden" name="id" id="deptCode"/>
                </td>
            </tr>
            <tr>
                <td><label for="deptName">名称</label></td>
                <td><input type="text" name="name" id="deptName" value="" class="text ui-widget-content ui-corner-all"></td>
            </tr>
            <tr>
                <td><label for="deptSeq">顺序</label></td>
                <td><input type="text" name="seq" id="deptSeq" value="1" class="text ui-widget-content ui-corner-all"></td>
            </tr>
            <tr>
                <td><label for="deptRemark">备注</label></td>
                <td><textarea name="remark" id="deptRemark" class="text ui-widget-content ui-corner-all" rows="3" cols="25"></textarea></td>
            </tr>
        </table>
    </form>
</div>
<div id="dialog-user-form" style="display: none;">
    <form id="userForm">
        <table class="table table-striped table-bordered table-hover dataTable no-footer" role="grid">
            <tr>
                <td style="width: 80px;"><label for="parentId">所在部门</label></td>
                <td>
                    <select id="deptSelectId" name="deptCode" data-placeholder="选择部门" style="width: 200px;"></select>
                </td>
            </tr>
            <tr>
                <td><label for="userName">名称</label></td>
                <input type="hidden" name="id" id="userId"/>
                <td><input type="text" name="username" id="userName" value="" class="text ui-widget-content ui-corner-all"></td>
            </tr>
            <tr>
                <td><label for="userMail">邮箱</label></td>
                <td><input type="text" name="mail" id="userMail" value="" class="text ui-widget-content ui-corner-all"></td>
            </tr>
            <tr>
                <td><label for="userTelephone">电话</label></td>
                <td><input type="text" name="telephone" id="userTelephone" value="" class="text ui-widget-content ui-corner-all"></td>
            </tr>
            <tr>
                <td><label for="userStatus">状态</label></td>
                <td>
                    <select id="userStatus" name="status" data-placeholder="选择状态" style="width: 150px;">
                        <option value="1">有效</option>
                        <option value="0">无效</option>
                        <option value="2">删除</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td><label for="userRemark">备注</label></td>
                <td><textarea name="remark" id="userRemark" class="text ui-widget-content ui-corner-all" rows="3" cols="25"></textarea></td>
            </tr>
        </table>
    </form>
</div>

<script id="deptListTemplate" type="x-tmpl-mustache">
<ol class="dd-list">
    {{#deptList}}
        <li class="dd-item dd2-item dept-name" id="dept_{{deptCode}}" href="javascript:void(0)" data-id="{{deptCode}}">
            <div class="dd2-content" style="cursor:pointer;">
            {{deptName}}
            <span style="float:right;">
                <a class="green dept-edit" href="#" data-id="{{deptCode}}" >
                    <i class="ace-icon fa fa-pencil bigger-100"></i>
                </a>
                &nbsp;
                <a class="red dept-delete" href="#" data-id="{{deptCode}}" data-name="{{deptName}}">
                    <i class="ace-icon fa fa-trash-o bigger-100"></i>
                </a>
            </span>
            </div>
        </li>
    {{/deptList}}
</ol>
</script>

<script type="application/javascript">
    $(function () {
        var deptList;   //存储树形部门列表
        var deptMap = {}; //存储map格式的部门信息
        var optionStr = "";
        var lastClickDeptId = -1;
        var deptListTemplate = $('#deptListTemplate').html();
        Mustache.parse(deptListTemplate);
        loadDeptTree();

        function loadDeptTree() {
            $.ajax({
                url: "/department/department",
                type: "get",
                success: function (result) {
                    if(result.code == "success"){
                        deptList = result.data;
                        var rendered = Mustache.render(deptListTemplate,{deptList: deptList})
                        $("#deptList").html(rendered);
                        recursiveRenderDept(deptList);
                        bindDeptClick();
                    }else{
                        showMessage("加载部门列表",result.message,false);
                    }
                }

            })
        }
        //递归渲染部门树
        function recursiveRenderDept(deptList) {
            if(deptList && deptList.length > 0){
                $(deptList).each(function (i, dept) {
                    deptMap[dept.deptCode] = dept;
                    if(dept.deptTrees.length > 0){
                        var rendered = Mustache.render(deptListTemplate,{deptList: dept.deptTrees})
                        $("#dept_" + dept.deptCode).append(rendered);
                        recursiveRenderDept(dept.deptTrees)
                    }
                })
            }
        }
        //绑定部门点击事件
        function bindDeptClick(){
            $(".dept-delete").click(function () {
                e.preventDefault();
                e.stopPropagation();
                var deptCode = $(this).attr("data-id");
                var deptName = $(this).attr("data-name");
                if(confirm("确定要删除部门["+deptName+"]吗？")){
                    //TODO:
                    console.log("delete dept:"+deptName);
                }
            })

            $(".dept-name").click(function (e) {
                e.preventDefault();
                e.stopPropagation();
                var deptCode = $(this).attr("data-id");
                hadleDeptSelected(deptCode)
            })

            $(".dept-edit").click(function (e) {
                e.preventDefault();
                e.stopPropagation();
                var deptCode = $(this).attr("data-id");
                $("#dialog-dept-form").dialog({
                    model: true,
                    title: "编辑部门",
                    open: function (event, ui) {
                        $(".ui-dialog-titlebar-close",$(this).parent().hide);
                        optionStr = "<option value='0'>-</option>"
                        recursiveRenderDeptSelect(deptList,1);
                        $("#deptForm")[0].reset();
                        $("#parentId").html(optionStr);
                        $("#deptCode").val(deptCode);
                        var targetDept = deptMap[deptCode];
                        if(targetDept){
                            $("#parentId").val(targetDept.parentId);
                            $("#deptName").val(targetDept.deptName);
                        }
                    },
                    buttons: {
                        "更新": function (e) {
                            e.preventDefault();
                            updateDept(false, function (data) {
                                $("#dialog-dept-form").dialog("close");
                            },function (data) {
                                showMessage("更新部门",data.message,false);
                            })
                        },
                        "取消":function () {
                            $("#dialog-dept-form").dialog("close");
                        }
                    }
                });
            })
        }

        function hadleDeptSelected(deptCode){

            if(lastClickdeptCode == -1){
                var lastDept = $("#dept_"+lastClickDeptId+" .dd2-content: first")
                lastDept.removeClass("btn-yellow");
                lastDept.removeClass("no-hover");
            }
            var currentDept = $("#dept_"+deptCode+" .dd2-content: first")
            lastDept.addClass("btn-yellow");
            lastDept.addClass("no-hover");
            lastClickDeptId = deptCode;
        }

        function loadUserList(deptCode){
            //TODO:
            console.log("load userlist,dept:"+deptCode)
        }


        $(".dept-add").click(function () {
            $("#dialog-dept-form").dialog({
                model: true,
                title: "新增部门",
                open: function (event, ui) {
                    $(".ui-dialog-titlebar-close",$(this).parent().hide);
                    optionStr = "<option value='0'>-</option>"
                    recursiveRenderDeptSelect(deptList,1);
                    $("#deptForm")[0].reset();
                    $("#parentId").html(optionStr);
                },
                buttons: {
                    "添加": function (e) {
                        e.preventDefault();
                        updateDept(true, function (data) {
                            $("#dialog-dept-form").dialog("close");
                        },function (data) {
                            showMessage("新增部门",data.message,false);
                        })
                    },
                    "取消":function () {
                        $("#dialog-dept-form").dialog("close");
                    }
                }
            });
        });

        function recursiveRenderDeptSelect(deptList, level) {
            level = level | 0;
            if(deptList && deptList.length > 0){
                $(deptList).each(function (i, dept) {
                    deptMap[dept.deptCode] = dept;
                    var blank = "";
                    if(level > 1){
                        for(var j =3;j<=level;j++){
                            blank += "..";
                        }
                        blank += "-";
                    }
                    optionStr += Mustache.render("<option value='{{deptCode}}}'>{{deptName}}</option>",{deptCode: dept.deptCode,deptName: blank + dept.deptName})
                    if(dept.deptTrees && dept.deptTrees.length > 0){
                        recursiveRenderDeptSelect(dept.deptTrees, level+1)
                    }
                })
            }
        }
        function updateDept(isCreate, successCallback, failCallback) {
            $.ajax({
                url: "/department/department",
                data: $("#deptForm").serializeArray(),
                type: isCreate ? "POST" : "PUT",
                success: function (result) {
                    if(result.code == "success"){
                        loadDeptTree();
                        if(successCallback){
                            successCallback(result)
                        }
                    }else{
                        if(failCallback){
                            failCallback(result);
                        }
                    }
                }
            })
        }
    })
</script>
</body>
</html>